/*
 * @Author: your name
 * @Date: 2021-05-19 17:47:55
 * @LastEditTime: 2021-05-30 17:59:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /xiangpan-admin/src/pages/staff/index.tsx
 */
import { IForm } from '@/components/form/interface';
import HeaderForm from '@/components/form';

import {
  Button,
  Card,
  Space,
  Table,
  Tag,
  Modal,
  TablePaginationConfig,
} from 'antd';
import React, { useState } from 'react';
import StaffModal from './staffModal';
import { PlusOutlined } from '@ant-design/icons';
import { useRequest } from 'umi';
import initPagination from '@/use/initPagination';
import useObj from '@/use/useObj';
import { globalModel } from '../globalModel';
import { EPermission, ISex } from '../../enum/index';
import { IFormTypeEnum } from '@/components/form/formComponent';
import { delete_staff, get_staff_list } from '@/services/pages';
import { useEffect } from 'react';
import { formatDateTime } from '../../utils/utils';
interface IProps {}

const Staff = (props: IProps) => {
  const [obj, setObj] = useObj({
    ...initPagination,
    visible: false,
    refresh: null,
    row: null,
    search: null,
  });

  const [id, setId] = useState('');
  const columns: IForm[] = [
    {
      key: 'staff_name',
      dataIndex: 'staff_name',
      title: '姓名',
    },
    {
      key: 'sex',
      dataIndex: 'sex',
      title: '性别',
      render: (text: number) => {
        return ISex[text as keyof typeof ISex];
      },
    },
    {
      key: 'account',
      dataIndex: 'account',
      title: '账号',
    },
    // {
    //   key: 'mobile',
    //   dataIndex: 'mobile',
    //   title: '手机号码',
    // },
    {
      key: 'password',
      dataIndex: 'password',
      title: '密码',
    },
    {
      key: 'is_online',
      dataIndex: 'is_online',
      title: '是否上班',
      render: (text: number) => {
        return text === 1 ? (
          <Tag color="success">是</Tag>
        ) : (
          <Tag color="error">否</Tag>
        );
      },
    },
    {
      key: 'create_time',
      dataIndex: 'create_time',
      title: '创建时间',
      render: (text: number) => {
        return formatDateTime(text);
      },
    },
    {
      key: 'opt',
      dataIndex: 'opt',
      title: '操作',
      render: (text, record) => {
        return (
          globalModel.userInfo?.is_super === EPermission.StoreAdmin && (
            <Space>
              <Button
                type="primary"
                onClick={() => setObj({ row: record, visible: true })}
              >
                编辑
              </Button>
              <Button
                type="primary"
                danger
                onClick={() => {
                  deleteStaff(record.staff_id);
                }}
              >
                删除
              </Button>
            </Space>
          )
        );
      },
    },
  ];

  const { data, error, loading } = useRequest(
    () =>
      get_staff_list({
        page_size: obj.pagination.pageSize,
        page_num: obj.pagination.current,
        search: obj.search,
      }),
    {
      refreshDeps: [obj.pagination, obj.refresh, obj.search],
    },
  );

  useEffect(() => {
    setObj((obj) => {
      obj.pagination.total = data?.results[0]?.total || 0;
    });
  }, [data]);

  const List: IForm[] = [
    {
      key: 'search',
      type: IFormTypeEnum.Input,
      label: '技师',
    },
  ];

  const deleteStaff = (id: number) => {
    Modal.confirm({
      title: '删除操作！',
      content: '你确定要删除该条数据？',
      onOk: async () => {
        await delete_staff({ staff_id: id });
        setObj((obj) => {
          obj.pagination.current = 1;
          obj.refresh = Symbol();
        });
      },
    });
  };

  return (
    <Card title="技师管理">
      <div className="flex-between">
        <HeaderForm
          list={List}
          layout="inline"
          style={{ margin: '10px 0' }}
          onSubmit={(form) => {
            setObj({ search: form.search });
            console.log(form, 'form==');
          }}
        />
        {globalModel.userInfo?.is_super === EPermission.StoreAdmin && (
          <Button
            type="primary"
            icon={<PlusOutlined />}
            style={{ marginBottom: 15 }}
            onClick={() => {
              setObj({ visible: true, row: null });
            }}
          >
            添加技师
          </Button>
        )}
      </div>

      <Table
        rowKey={(record) => record.staff_id}
        loading={loading}
        columns={columns}
        dataSource={data?.results}
        pagination={obj.pagination}
        onChange={(pagination: TablePaginationConfig): void => {
          const { current, pageSize } = pagination;
          setObj((obj: any) => {
            obj.pagination.current = current;
            obj.pagination.pageSize = pageSize;
            obj.onReFresh = Symbol();
          });
        }}
      />
      {obj.visible && (
        <StaffModal
          visible={obj.visible}
          row={obj.row}
          close={() => setObj({ visible: false })}
          refresh={() => {
            setObj((obj) => {
              obj.pagination.current = 1;
              obj.refresh = Symbol();
            });
          }}
        />
      )}
    </Card>
  );
};
export default Staff;
